<template>
  <el-dialog title="备件品类" @open="onOpen" @close="onCancel" :lock-scroll="false" :visible.sync="visible" width="600px">
    <template>
      <el-form :model="form" ref="formRef" label-width="auto" :rules="rules">
        <el-form-item label="编码：" prop="c_number" style="width: 85%">
          <el-input v-model="form.c_number" placeholder="请输入编码"></el-input>
        </el-form-item>

        <el-form-item label="名称：" prop="name" style="width: 85%">
          <el-input v-model="form.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="规格型号：" prop="model" style="width: 85%">
          <el-input v-model="form.model" placeholder="请输入规格型号"></el-input>
        </el-form-item>
        <el-form-item label="状态：" prop="status" style="width: 85%">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="类别：" prop="type" style="width: 85%">
          <el-select v-model="form.type" placeholder="请输入类别">
            <el-option
              v-for="item in typeOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="计量单位：" prop="uom" style="width: 85%">
          <el-select v-model="form.uom" placeholder="请输入计量单位">
            <el-option
              v-for="item in uomOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="销售价：" prop="sale_price" style="width: 85%">
          <el-input-number :min="0" v-model="form.sale_price" placeholder="请输入销售价"></el-input-number>
        </el-form-item>
        <el-form-item label="出库价：" prop="out_price" style="width: 85%">
          <el-input-number :min="0" v-model="form.out_price" placeholder="请输入出库价"></el-input-number>
        </el-form-item>
        <el-form-item label="说明：" prop="description" style="width: 85%">
          <el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}" maxlength="50" show-word-limit
                    v-model="form.description"
                    placeholder="请输入说明"></el-input>
        </el-form-item>
      </el-form>
    </template>
    <span slot="footer" class="dialog-footer">
      <el-button @click="onCancel">取 消</el-button>
      <el-button type="primary" @click="onConfirm" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: "add-dialog",
  props: ['current'],
  data() {
    return {
      loading: false,
      visible: false,
      httpMethod: 'post',
      form: {
        c_number: null,
        name: null,
        type: null,
        model: null,
        uom: null,
        sale_price: null,
        out_price: null,
        description: null,
        status: 1,
      },
      rules: {
        c_number: [
          {required: true, message: '编码为必需', trigger: 'change'}
        ],
        name: [
          {required: true, message: '名称为必需', trigger: 'change'}
        ],
        type: [
          {required: true, message: '类别为必需', trigger: 'change'}
        ],
        model: [
          {required: true, message: '规格型号为必需', trigger: 'change'}
        ],
        uom: [
          {required: true, message: '计量单位为必需', trigger: 'change'}
        ],
        sale_price: [
          {required: true, message: '售价为必需', trigger: 'change'}
        ],
        out_price: [
          {required: true, message: '出库价为必需', trigger: 'change'}
        ],
      },
      typeOptions: [],
      uomOptions: [],
    }
  },
  mounted() {
    this.handleQueryParams()
  },
  methods: {
    onActive(httpMethod = 'post') {
      this.visible = true;
      this.httpMethod = httpMethod
    },
    onOpen() {
      if (this.current !== null) {
        //nextTick的目的： dailog的内部组件为初始懒加载 若第一次打开为编辑，第一次出入form组件初始对象内属性会存在初值，会导致resetFields与预期不符
        //这里使用nextTick 将form赋值延后
        this.$nextTick(() => {
          this.form = Object.assign(this.form, this.current)
        })
      }
    },
    onConfirm() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          this.current !== null ? this.httpMethod = 'put' : this.httpMethod = 'post'
          this.handlePostOrPutForm(this.form)
        }
      });
    },
    onCancel() {
      this.httpMethod = 'post'
      this.$refs.formRef.resetFields()
      this.visible = false;
    },
    async handlePostOrPutForm(form) {
      this.loading = true
      const res = (await this.$http[this.httpMethod](`/part_categories${this.httpMethod == 'put' ? `/${this.current.id}` : ''}`, form)).data
      res.success ? this.$message.success(res.msg) : this.$message.error(res.msg)
      this.loading = false
      this.$emit("reload")
      this.onCancel()
    },
    async handleQueryParams() {
      const res = (await this.$http.get('/part_categories/params')).data
      res.success ? (() => {
          this.typeOptions = res.data.type;
          this.uomOptions = res.data.uom;
        })()
        :
        this.$message.error(this.msg)
    }
  }

}
</script>

<style scoped lang="scss">

</style>
